<template>
  <div class="flex1 flexC JustifyContentC">
    <div class="scrollBar flexC list">
      <p class="titleItem">
        <img src="@/assets/img/zhjg/2.png" alt="" class="title_img"/>
        经营性公墓
      </p>
      <ul class="ylList">
        <li v-for="(item, index) in dataList"
            :key="item.expectWarnType"
            @click="swithMap(item.expectWarnType)"
            :class="{'active2':index%2 != 0}"
            class="font_s22 AlignItemsC JustifyContentSB flex colorF">
          <p style="text-align: left;color: #fff">{{ item.expectWarnName }}</p>
          <p class="font_s22"
            style="text-align: right;color: #fff">
            <span class="font_s30 font_Impact" style="color: #36F6D4">{{ item.num }}</span>
          </p>
        </li>
      </ul>
      <p class="titleItem">
        <img src="@/assets/img/zhjg/2.png" alt="" class="title_img"/>
        经营性骨灰堂
      </p>
      <ul class="ylList ylList2">
        <li v-for="(item, index) in dataList2"
            :key="item.expectWarnType"
            @click="swithMap(item.expectWarnType)"
            :class="{'active2':index%2 != 0}"
            class="font_s22 AlignItemsC JustifyContentSB flex colorF">
          <p style="text-align: left;color: #fff">{{ item.expectWarnName }}</p>
          <p  class="font_s22"
              style="text-align: right;color: #fff">
            <span class="font_s30 font_Impact" style="color: #36F6D4">{{ item.num }}</span>
          </p>
        </li>
      </ul>
      <p class="titleItem">
        <img src="@/assets/img/zhjg/2.png" alt="" class="title_img"/>
        殡仪馆
      </p>
      <ul class="ylList">
        <li v-for="(item, index) in dataList3"
            :key="item.expectWarnType"
            @click="swithMap(item.expectWarnType)"
            :class="{'active2':index%2 != 0}"
            class="font_s22 AlignItemsC JustifyContentSB flex colorF">
          <p style="text-align: left;color: #fff">{{ item.expectWarnName }}</p>
          <p
                  class="font_s22"
                  style="text-align: right;">
            <span class="font_s30 font_Impact" style="color: #75FBFE;;">{{ item.num }}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { gdmapOther } from '../../assets/gdmap'
  import { queryWarnOrgListByWarnType } from '@/api/home'
  export default {
    name: "NsfkItem",
    props: {
      dataList: {
        type: Array,
        default: () => {
          return []
        }
      },
      dataList2: {
        type: Array,
        default: () => {
          return []
        }
      },
      dataList3: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data () {
      return {
        warnType: '',
        mapList: []
      }
    },
    methods: {
      swithMap (warnType) {
        this.warnType = warnType
        this.$root.MapGd = null
        window.gmap.clearMap()
        this.getMap ()
      },
      getMap () {
        queryWarnOrgListByWarnType({
          warnType:  this.warnType
        }).then((response) => {
          if (response) {
            this.mapList = response.data.response
            gdmapOther(window.gmap, this.mapList, 8, 8)
          }
        }).catch((response) => {
          console.log(response)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    height: 52vh;
    overflow-y: auto;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }
  .scrollBar {
    overflow-y: auto;
  }
  .scrollBar::-webkit-scrollBar {
    width: 8px;
    border-radius: 10px;
    background-color: rgba($color: #00000000, $alpha: 0)
  }
  .scrollBar::-webkit-scrollBar-thumb {
    border-radius: 10px;
    background-color: rgba($color: #00000000, $alpha: 0)
  }
  .titleItem {
    line-height: 2.1875rem;
    text-align: left;
    padding-left: 2.5rem;
    color: white;
    position: relative;
    .title_img {
      width: 1.4375rem;
      margin: 0 .2rem 0 1rem;
      height: 1.75rem;
      position: absolute;
      top: .2rem;
      left: 0rem
    }
  }
  .ylList li{
    border: 1px solid #0f93ab;
    color: rgba(6,22,48, 0.25);
    background: rgba(0, 186, 255, .1);
    border-bottom: none;
    border-right: none;
    padding: 0 .7rem 0 1rem;
    box-sizing: border-box;
    width: 50%;
    height: 4.16rem;
    float: left;
    text-align: center;
  }
  .ylList li:last-child{
    border-right: 1px solid #0f93ab;
    border-bottom: 1px solid #0f93ab;
  }
  .ylList li:nth-child(7),.ylList2 li:nth-child(6) {
    border-bottom: 1px solid #0f93ab;
  }

  .active{
    border-right: none;
    border-bottom: none;
  }
  .active2{
    border-right: 1px solid #0f93ab!important;
  }
</style>